<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-26 15:39:39
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-27 09:58:29
 * @FilePath: \后端管理系统\app\src\views\Categories\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-card class="box-card">
    <MyBreadcrumb :breadList="$route.meta.breadList" />

    <tree-table
      style="margin-top: 20px"
      :data="tableData"
      :columns="columns"
      show-index
      border
      show-row-hover
      :expand-type="false"
      :selection-type="false"
    >
      <template slot="isok" slot-scope="scope">
        <i
          class="el-icon-success"
          v-if="!scope.row.cat_deleted"
          style="color: lightGreen"
        ></i>
        <i class="el-icon-error" v-else style="color: red"></i>
      </template>
      <template slot="level" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag type="success" v-else-if="scope.row.cat_level === 1"
          >二级</el-tag
        >
        <el-tag type="warning" v-else>三级</el-tag>
      </template>
      <template slot="opt">
        <el-button type="primary" icon="el-icon-edit" size="mini"
          >编辑</el-button
        >
        <el-button type="danger" icon="el-icon-delete" size="mini"
          >删除</el-button
        >
      </template>
    </tree-table>

    <el-pagination
      style="margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pagenum"
      :page-sizes="[ 5, 10, 15, 20,25, 30]"
      :page-size="form.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import MyBreadcrumb from "../../components/MyBreadcrumb.vue";
import { httpCateGories } from "../../api/goods";
export default {
  components: {
    MyBreadcrumb,
  },
  data() {
    return {
      tableData: [],
      form: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      total:0,
      columns: [
        { label: "分类名称", prop: "cat_name" },
        {
          label: "是否有效",
          prop: "effective",
          type: "template",
          template: "isok",
        },
        {
          label: "分类等级",
          prop: "level",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
    };
  },
  created() {
    this.initList();
  },
  methods: {
    async initList() {
      const res = await httpCateGories("/categories", this.form);
      console.log(res);
      this.tableData = res.data.data.result;
      this.total = res.data.data.total;
    },
    handleSizeChange(val){
      console.log(22)
      
      this.form.pagesize=val;
       this.initList();

    },
    handleCurrentChange(val){
      this.form.pagenum=val;
       this.initList();

    }
  },
};
</script>